<!-- 右边图标跳转 页面 -->
<template>
	<view class="v-index-right" v-if="uid">
		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(40) + 'px' }"
			v-show="!hiddenModel">
			<text>推广中心</text>
		</view>


		<!-- 	<u-navbar :is-back="false">
			<view class="v-return flex-align-center" @click="toRe()" :style="{ paddingTop: customBar*4 + 'px' }"
				v-if="customBar">
				<uni-icons type="left" color="#fff" size="25"></uni-icons>
				<text style="color: #fff;">返回</text>
			</view>
		</u-navbar> -->
		<!-- <image src="/static/999.png" mode=""></image> -->
		<view class="bg" :style="{ '--bg-image': `url(${promotionCenterBg})` }">
			<view class="commission flex-start-center">
				<image class="avatar" :src='brokerageIndex.avatar' mode=""></image>
				<view class="flex-columns" style="height: 100rpx;">
					<view class=" flex-start-center">
						<view class="font-size_32rpx font-overflow " style="color: #fff;max-width:200rpx;">
							{{brokerageIndex.nickname}}
						</view>
						<view class="yellowBtn flex" style="font-size: 20rpx;margin-left: 20rpx;">
							{{user.is_partner==0?'普通合伙人':'超级合伙人'}}
						</view>
					</view>
					<view class="" style="color: #fff;">
						上级:{{brokerageIndex.p_nickname?brokerageIndex.p_nickname:'平台'}}
					</view>
				</view>
			</view>
		</view>

		<view class="partnerCard " v-if="user.is_partner==0&&partnerSetObj.rights" @click="upgrade()">
			<view class="flex-between padding-bottom_20rpx border-bottom-ECECEC">
				<view class="">
					<view class="font-size_36rpx" style="color: #FEEACD;">
						超级合伙人
					</view>
					<view class="margin-top_10rpx font-size_24rpx" style="color: #EFEFEF;">
						升级后奖励{{partnerSetObj.give}}抵用金购买商品
					</view>
				</view>
				<view class="upgradeNow flex">
					立即升级
				</view>
			</view>
			<view class="margin-top_10rpx">
				<image class="rights" :src="partnerSetObj.rights" mode=""></image>

			</view>


		</view>

		<view v-if="user.is_partner==0">
			<image class="archRow" src="/static/矢量 173.png" mode=" aspectFill"></image>
		</view>
		<view class="WithdrawalCard " :style="user.is_partner==1?'margin-top:-220rpx;position: relative;':''">
			<view class="flex-between  " v-if="brokerageIndex">
				<view class="">
					<view class="font-size_32rpx" style="color: #696969;">
						当前可提现金额(元)
					</view>
					<view class="margin-top_20rpx font-size_40rpx font-weight_bold" style="color: #FF0202;">
						{{brokerageIndex.brokerage?brokerageIndex.brokerage:'0.00'}}
					</view>
				</view>
				<view class="upgradeNow flex" v-if="brokerageSetObj.cash_open==1" @click="goWithdrawal()">
					提现
				</view>
			</view>

			<view class="detailsContainer flex-between margin-top_30rpx">
				<block v-for="(i, j) in moneyList" :key="j">
					<view class="flex-column v-price">

						<text style="font-size_32rpx; margin-bottom: 10rpx;">{{ i.title }}</text>
						<view style="color: #000000;">{{ i.num }}</view>
					</view>

				</block>
			</view>

		</view>
		<view class="invitingNewcomers">
			<view class="rule-head">
				<view class="line"></view>
				<text class="title">拉新奖励</text>
				<view class="line"></view>
			</view>
			<view class="flex-between margin-top_20rpx">
				<view class="flex">
					<view class="">
						<image class="invitingImg" src="/static/组合3020.png" mode=""></image>
					</view>
					<view class="flex-columns margin-left_16rpx" style="height: 100rpx;">
						<view class="flex">
							<view class="font-weight_bold " style="font-size: 34rpx;">
								邀请新用户
							</view>
							<view class="flex-start-center goldCoinBg margin-left_16rpx">
								<view class="flex-align-center" style="margin-left: -10rpx;">
									<image class="goldCoin" src="/static/detail/组合 3012.png" mode="aspectFill"></image>
									<text
										style="font-size: 24rpx;color: #EC9F40; font-weight: ;">{{user.is_partner==0?integralSetObj.invite:partnerSetObj.invite}}</text>
								</view>
							</view>
						</view>
						<view class="" style="color: #999999;" v-if="integralSetObj.invite">
							邀请新用户奖励{{user.is_partner==0?integralSetObj.invite:partnerSetObj.invite}}抵用金
						</view>
					</view>
				</view>

				<button open-type="share" class="btncss">
					<view class="invitingBtn flex">
						邀请
					</view>
				</button>

			</view>
		</view>

		<view class="v-padding">
			<view class="v-title flex-align-center">
				<text></text>
				<view>常用功能</view>
			</view>

			<view class="flex-wrap-flex-start">
				<block v-for="(i, j) in list" :key="i">


					<view class="v-order  margin-bottom_40rpx" v-if="i.url=='share'">
						<button open-type="share" class="btncss flex-column">
							<image :src="i.img"></image>

							<view>{{ i.text }}</view>
						</button>

					</view>
					<block v-else>
						<view class="v-order flex-column margin-bottom_40rpx" @click="toGo(i)"
							v-if="!(brokerageSetObj.cash_open!=1&&i.text=='提现记录')">

							<image :src="i.img"></image>

							<view>{{ i.text }}</view>


						</view>
					</block>
				</block>
			</view>
		</view>
		<view class="v-height2"></view>
		<view class="height80">
			
		</view>
		 <sunui-tabbar :fixed="true" :current="2"></sunui-tabbar>

		<!-- <uv-tabbar :value="value" @change="change">
			<uv-tabbar-item text="首页">
				<template v-slot:active-icon>
					<image style="height: 50rpx; width: 50rpx;" class="icon" src="/static/tabbar/蒙版-1.png"></image>

				</template>
				<template v-slot:inactive-icon>
					<image style="height: 50rpx; width: 50rpx;" class="icon" src="/static/tabbar/蒙版.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="活动">
				<template v-slot:active-icon>
					<image style="height: 50rpx; width: 50rpx;" class="icon" src="/static/tabbar/蒙版-3.png"></image>

				</template>
				<template v-slot:inactive-icon>
					<image style="height: 50rpx; width: 50rpx;" class="icon" src="/static/tabbar/蒙版-2.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="推广">
				<template v-slot:active-icon>
					<image style="height: 50rpx; width: 50rpx;" class="icon" src="/static/tabbar/蒙版-7.png"></image>

				</template>
				<template v-slot:inactive-icon>
					<image style="height: 50rpx; width: 50rpx;" class="icon" src="/static/tabbar/蒙版-6.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="我的">
				<template v-slot:active-icon>
					<image style="height: 50rpx; width: 50rpx;" class="icon" src="/static/tabbar/蒙版-5.png "></image>

				</template>
				<template v-slot:inactive-icon>
					<image style="height: 50rpx; width: 50rpx;" class="icon" src="/static/tabbar/蒙版-4.png"></image>
				</template>
			</uv-tabbar-item>

		</uv-tabbar> -->


	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:2,
				uid: uni.getStorageSync('uid'),
				// brokerageSet:uni.getStorageSync('brokerageSet'),
				user: uni.getStorageSync('user'),
				promotionCenterBg: this.$imgs.Bj999,
				heightSystemss: 0,
				customBar: 0,
				brokerageIndex: {},
				brokerageSetObj: {},

				scrollTop: 0, //滚动距离
				hiddenModel: true, //显示影藏
				opacityStyle: 0,
				moneyList: [


				],
				list: [{
						img: '/static/detail/组合 3013.png',
						text: '我的团队',
						url: '/pages/distribution/myTeam',
						isTrue: 1
					},
					{
						img: '/static/detail/组合 3018.png',
						text: '提现记录',
						url: '/pages/distribution/withdrawalRecord',
						// ==0 则分销关闭 isTrue为1展示
						isTrue: uni.getStorageSync('system').distributionSet && uni.getStorageSync('system')
							.distributionSet.distribution_level == 0 ? 2 : 1
					},
					{
						img: '/static/detail/组合 3019.png',
						text: '分销明细',
						url: '/pages/distribution/distributionDetails',
						isTrue: 1,
						subscribeMessage: 'subscribeMessage'

					},

					{
						img: '/static/detail/组合 3016.png',
						text: '分销说明',
						isTrue: 1,
						url: '/pages/distribution/distributionInstructions',
					},

					{
						img: '/static/detail/组合 3015.png',
						text: '推广海报',
						isTrue: 1,
						url: 'poster'

					},
					{
						img: '/static/detail/组合 3017.png',
						text: '转发给好友',
						isTrue: 1,
						url: 'share'
					},

				],
				integralSetObj: {},
				partnerSetObj: {}

			};
		},

		onLoad() {
			this.createdgetSystemInfo();
			// this.brokerageIndexFn()
			// this.brokerageSetFn()

		},
		onShow() {
			this.getInfo()
			this.brokerageIndexFn()
			this.brokerageSetFn()
			this.partnerSetFn()
			this.integralSetFn()
			this.userInfos()
			

		},
		onPageScroll(ev) {


			if (ev.scrollTop > 10) {
				let opacity = ev.scrollTop / 140

				// this.opacityStyle = opacity > 1 ? 1 : opacity
				this.opacityStyle = 1
				this.hiddenModel = false
				// this.createdgetSystemInfo();

			} else {
				this.hiddenModel = true
			}
		},
		methods: {
			async userInfos() {
				const result = await this.$http.get({
					url: this.$api.userInfo,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: uni.getStorageSync('pid') ? uni.getStorageSync('pid') : ''
						// pid: ''
					}
				});
				if (result.errno == 0) {
					this.user = result.data;
					uni.setStorageSync('user', this.user);
			
				}
			},
			change(e) {
				console.log(e)
				if (e == 0) {
					this.$sun.navSwitch('/pages/index/index')
				} else if (e == 1) {
					this.$sun.navSwitch('/pages/activityPgae/activity')
				} else if (e == 3) {
					this.$sun.navSwitch('/pages/mine/mine')
				}
			},
			async getInfo() {
				if (!uni.getStorageSync('uid')) {
					uni.showModal({
						title: '登录提示',
						content: '请先登录',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: `/pages/login/login`
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}

			},
			async templateTpo() {
				wx.requestSubscribeMessage({
					tmplIds: [uni.getStorageSync("templateSet").brokerage_arrival_template, uni.getStorageSync(
						"templateSet").integral_change_template],
					success: res => { //成功、
						if (res[Object.keys(res)[0]] == "accept") {
							console.log(res)
							// this.$sun.toast("成功订阅")
						} else {
							uni.showModal({
								title: "温馨提示",
								content: "点击右上角的「...」按钮，找到「订阅消息」相关选项，并设定为「接收」状态方可再次订阅"
							})
						}
					},
					fail: err => { //失败
						this.$sun.toast("订阅消息配置失败");
					}
				})
			},


			async integralSetFn() {
				const result = await this.$http.post({
					url: this.$api.integralSet,
					data: {

					}
				});
				if (result.errno == 0) {

					this.integralSetObj = result.data;
					uni.setStorageSync('integralSet', result.data);
				}
			},
			async partnerSetFn() {
				const result = await this.$http.post({
					url: this.$api.partnerSet,
					data: {

					}
				});
				if (result.errno == 0) {

					this.partnerSetObj = result.data;
					uni.setStorageSync('partnerSet', result.data);
				}
			},
			goWithdrawal() {
				this.$sun.navGo('/pages/distribution/applyWithdrawal')
			},
			upgrade() {
				this.$sun.navGo('/pages/partnerPromotion/partnerPromotion')
			},
			onShareAppMessage(res) {

				if (res.from === 'button') {
					return {
						// 自定义分享标题
						title: this.brokerageSetObj.share_title ? this.brokerageSetObj.share_title : '邀请新人',
						desc: this.brokerageSetObj.share_desc ? this.brokerageSetObj.share_desc : '邀请新用户奖励' + this.user
							.is_partner == 0 ? this.integralSetObj.invite : this.partnerSetObj.invite + '抵用金',
						imageUrl: this.brokerageSetObj.share_pic ? this.brokerageSetObj.share_pic : '',
						path: '/pages/index/index?pid=' + (uni.getStorageSync("uid") ? uni.getStorageSync("uid") : '')
					};

				} else {
					return {
						// 自定义分享标题
						title: this.brokerageSetObj.share_title ? this.brokerageSetObj.share_title : '邀请新人',
						desc: this.brokerageSetObj.share_desc ? this.brokerageSetObj.share_desc : '邀请新用户奖励' + this.user
							.is_partner == 0 ? this.integralSetObj.invite : this.partnerSetObj.invite + '抵用金',
						imageUrl: this.brokerageSetObj.share_pic ? this.brokerageSetObj.share_pic : '',
						path: '/pages/index/index?pid=' + (uni.getStorageSync("uid") ? uni.getStorageSync("uid") : '')
					};
				}


			},

			async brokerageSetFn() {
				const result = await this.$http.get({
					url: this.$api.brokerageSet,
					data: {


					}
				});
				if (result.errno == 0) {



					this.brokerageSetObj = result.data
					uni.setStorageSync('brokerageSet', result.data);
				}
			},
			async brokerageIndexFn() {
				const result = await this.$http.get({
					url: this.$api.brokerageIndex,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),


					}
				});
				if (result.errno == 0) {

					this.moneyList = [

						{
							num: result.data.integral,
							title: uni.getStorageSync('system').integral_name ? uni.getStorageSync('system')
								.integral_name : '抵用金',

						},
						{
							num: result.data.brokerage,
							title: '佣金',

						},
						{
							num: result.data.teamCount,
							title: '我的团队',

						}
					]

					this.brokerageIndex = result.data
					uni.setStorageSync('brokerageIndex', result.data);
				}
			},
			toGo(item) {
				console.log(item)
				if (item.url == 'poster') {
					this.$sun.navGo('/pages/distribution/distributionPoster')
					// this.$refs.myPackagePopup.show({
					// 	style: 'padding:50rpx;',
					// 	bottomClose: true,
					// 	shadeClose: true,
					// 	topclose: true
					// });
				} else if (item.url == 'poster') {
					console.log('分享')
				} else if (item.subscribeMessage == 'subscribeMessage') {
					this.templateTpo()
					this.$sun.navGo(item.url)
				} else {
					this.$sun.navGo(item.url)
				}

			},
			toRe() {
				this.$sun.navBack();
			},
			createdgetSystemInfo() {
				uni.getSystemInfo({
					success: e => {
						// 文章网址：https://blog.csdn.net/weixin_44510655/article/details/127131947
						this.heightSystemss = e.statusBarHeight;
						const custom = wx.getMenuButtonBoundingClientRect();
						this.customBar = ((custom.top - e.statusBarHeight) * 2 + custom.height) / 4

						console.log(this.customBar)
					}
				});
			},

		}
	};
</script>

<style lang="less">
	.border-bottom-ECECEC {
		border-bottom: 2rpx solid #a79f9f;
	}

	.v-index-right {
		#barTitle {
			position: fixed;
			width: 750rpx;
			top: 0;
			left: 0;
			background: #fff;
			color: #000000;
			text-align: center;
			font-weight: bold;
			z-index: 9999
		}

		#barTitle>text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx
		}

		.bg {
			background-image: (var(--bg-image));
			background-repeat: no-repeat;
			background-size: contain;
			position: relative;
			height: 570rpx;

			.commission {
				position: absolute;
				top: 40%;
				z-index: 999;
				left: 34%;
				transform: translate(-50%, -50%);

				.avatar {
					width: 104rpx;
					height: 106rpx;
					margin-right: 15rpx;
					border-radius: 50%;
				}

				.yellowBtn {
					width: 140rpx;
					height: 45rpx;
					background-color: #FFDC00F5;
					line-height: 45rpx;
				}
			}
		}

		.partnerCard {
			padding: 20rpx;
			position: relative;
			margin: 0 20rpx;
			height: 314rpx;
			border-radius: 20rpx;
			margin-top: -250rpx;
			background: linear-gradient(110.81deg, rgb(43, 44, 52) 3.897%, rgb(40, 45, 81) 99.054%);

			.upgradeNow {
				width: 160rpx;
				height: 64rpx;
				border-radius: 146rpx;
				color: #fff;
				background: linear-gradient(180.00deg, rgb(248, 222, 183), rgb(254, 235, 206) 100%);
			}

			.rights {
				margin-top: 20rpx;
				// width: 728rpx;
				height: 130rpx;
			}

		}

		.WithdrawalCard {


			border-radius: 20rpx;
			padding: 30rpx;
			margin: 0 20rpx;
			background: rgb(255, 255, 255);
			margin-bottom: 20rpx;

			.upgradeNow {
				width: 156rpx;
				height: 66rpx;
				border-radius: 192rpx;
				color: #fff;
				background: linear-gradient(101.31deg, rgb(240, 70, 116) 1.709%, rgb(240, 63, 53) 98.967%);
			}

			.detailsContainer {
				.v-price {
					color: #696969;
					// margin-bottom: 48rpx;
					width: calc(100% / 3);

					view {
						color: #fff;
						font-size: 40rpx;

					}
				}
			}

		}

		.posterDescription {
			border-radius: 20rpx;
			padding: 10rpx;
			margin: 0 20rpx;
			background: rgb(255, 255, 255);
		}

		.invitingNewcomers {

			.invitingImg {
				width: 86rpx;
				height: 88rpx;

			}

			.goldCoinBg {

				border-radius: 112rpx;
				padding: 0rpx 20rpx;
				background: rgb(253, 247, 235);

				.goldCoin {
					width: 48.12rpx;
					height: 48.12rpx;

				}
			}



			border-radius: 20rpx;
			padding: 30rpx;
			margin: 0 20rpx;
			background: rgb(255, 255, 255);

			.rule-head {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding-top: 0 20rpx;

				.line {
					flex: 1;
					height: 2rpx;
					background-color: rgb(252, 212, 159);
					;
				}

				.title {
					width: 200rpx;
					color: #FFD08F;
					line-height: 70rpx;
					font-size: 38rpx;
					text-align: center;
					margin: 0 20rpx;
					border-radius: 8rpx;

				}
			}

			.invitingBtn {
				border-radius: 192rpx;
				width: 132rpx;
				height: 64rpx;
				color: #fff;
				background: linear-gradient(101.31deg, rgb(240, 70, 116) 2.22%, rgb(240, 63, 53) 98.658%);
			}
		}

		.v-padding {
			padding: 40rpx 0 4rpx;
			margin: 20rpx 20rpx 0;

			background: #fff;
			border-radius: 10rpx;
			box-shadow: 8rpx 2rpx 8rpx #65b0f90f;

			.v-title {
				padding: 0rpx 26rpx 42rpx;

				text {
					width: 10rpx;
					height: 24rpx;
					border-radius: 138rpx;

					background: linear-gradient(180.00deg, rgb(240, 70, 112), rgb(240, 64, 58) 100%);
				}

				view {
					margin-left: 10rpx;
					font-size: 34rpx;
					font-weight: bold;
				}
			}

			.v-order {
				position: relative;
				width: calc(100% / 4);

				image {
					width: 70rpx;
					height: 70rpx;
				}

				text {
					position: absolute;
					top: -12rpx;
					left: 102rpx;
					padding: 0 12rpx;
					line-height: 34rpx;
					display: inline-block;
					// min-width: 34rpx;
					height: 34rpx;
					font-size: 20rpx;
					color: #fff;
					background-color: orangered;
					border-radius: 50%;
				}

				view {
					margin-top: 28rpx;
					color: #333;
				}
			}
		}

		.archRow {
			width: 750rpx;
			height: 50rpx;
			margin-top: -30rpx;
		}

	}

	.v-return {
		position: absolute;
		margin-left: 20rpx;
		z-index: 999;
		width: 100%;

		image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 32rpx;
		}

	}
</style>